<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>查询单一用户</title>
  <style></style>
</head>
<body>
  <h1>查询单一用户（通过名字查询）</h1>
  <hr>
  <input type="text" placeholder="输入用户姓名" id="username">
  <button id="btn">查询</button>
  <table align="center" border="1">
    <thead>
      <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>电话号码</th>
        <th>是否会员</th>
      </tr>
    </thead>
    <tbody id="box">
    </tbody>
  </table>
  <script>
    //1.获取元素
    var username = document.getElementById('username');
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    //2.点击事件
    btn.onclick = function(){
      //收集用户数据
      var unameval = username.value;
      //调用ajax传参
      ajax(unameval);
    }
    //3.ajax函数
    function ajax(n){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
          if(xhr.status>=200&&xhr.status<300){
            console.log(xhr.responseText)
            var result = JSON.parse(xhr.responseText);
            if(result.code == 1){
              //成功后，只需要在页面上把信息显示出来
              show(result.data)
            }else {
              alert(result.msg)
            }
          }
        }
      }
      xhr.open('GET',`/admin/find?uname=${n}`,true);
      xhr.send();
    }

    //4.show函数
    function show(arr){
      var str='';
      for(var i =0;i<arr.length;i++){
        str+=`<tr>
        <td>${arr[i].u_id}</td>
        <td>${arr[i].u_names}</td>
        <td>${arr[i].u_phone}</td>
        <td>${arr[i].u_member}</td>
      </tr>`
      }
      box.innerHTML = str;
    }
  </script>
</body>
</html>